<template>
  <template v-if="direction === 'left'">
    <div @click="toggle" :class="['fold_btn_max fold_btn_left', { active_left_hide: !show }]">
      <div>
        <!--        <ArrowDownCircleOutline v-show="show"/>-->
        <ArrowDownBold v-show="show" />
        <ArrowRightBold v-show="!show" />
        <!--        <ArrowForwardCircleOutline v-show="!show"/>-->
      </div>
    </div>
  </template>
  <template v-else>
    <div @click="toggle" :class="['fold_btn_max fold_btn_right', { active_right_hide: !show }]">
      <div>
        <!--        <ArrowDownCircleOutline v-show="show"/>-->
        <!--        <ArrowForwardCircleOutline v-show="!show"/>-->
        <ArrowDownBold v-show="show" />
        <ArrowRightBold v-show="!show" />
      </div>
    </div>
  </template>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

/**工具栏折叠按钮 */
export default defineComponent({
  name: 'FoldBtn',
  props: {
    direction: {
      type: String,
      default: 'left',
    },
    show: {
      type: Boolean,
      // required: true,
      default: true,
    },
  },
  emits: ['update:show'],
  components: {
    // DoubleRightOutlined,
    // DoubleLeftOutlined
  },
  setup(props, { emit }) {
    const toggle = () => emit('update:show', !props.show);
    return {
      toggle,
    };
  },
});
</script>

<style lang="scss" scoped>
$w: -12px;
$hideW: -20px;

.fold_btn_max {
  top: 21px;
  border-radius: 50%;
  position: absolute;
  width: 24px;
  height: 24px;
  text-align: center;
  color: #ffffff8c;
  background: #18234099;
  border: 1px solid #4b6cb74c;
  //border: 1px solid #ccc;
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 9999;
}

.fold_btn_left {
  right: $w;
}

.fold_btn_right {
  left: $w;
}

.active_left_hide {
  right: $hideW;
  border-radius: 0px 50% 50% 0px;
  border-left: none;
}

.active_right_hide {
  left: $hideW;
  border-radius: 50% 0px 0px 50%;
  border-right: none;
}
</style>
